<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;

        /*
          颜色单位：
             在css中可以直接使用颜色名来设置各种颜色
             比如：red、orange、yellow、blow、green
             但是在css中直接使用颜色名是非常不方便的

             RGB值：
                -RGB通过三种颜色的不同浓度来调配出来不同的颜色
                -R red ，G green ，B blue
                -每种颜色的范围在0-255在（0%-100%）之间
                rgb(0,0,0)黑色
                rgb（255，255，255）白色
                -语法，RGB（红色，绿色，蓝色）
             RGBA：
                 -即使在RGB的基础上增加了一个a表示不透明度
                 -需要四个值，前三个和rgb一样，第四个表示不透明度
                   1表示完全不透明  0表示完全透明 .5表示半透明

              十六进制的RGB值：
                 语法：#红色绿色蓝色
                 颜色浓度通过00-ff表示

             HSL值 HSLA值
                 H  色相（0-360）
                 S  饱和度，颜色的浓度0%-100%
                 L  亮度，颜色的亮度0%-100%




          */
        /*    background-color: rgb(255,0,0);
            background-color: rgb(233,33,255);*/
            background-color: rgba(233,0,0,.7);
            background-color: #bbffaa;
            background-color: hsl(1,12%,80%);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>